<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Column graph for tickets' sold seats group by Event</title>
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/Grid.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/claro.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/claro/document.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/claroGrid.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/claroEnhancedGrid.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/EnhancedGrid.css" />
<link rel="stylesheet" type="text/css"
	href="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css" />
<link rel="stylesheet" type="text/css" href="msg.css" />

	<script type="text/javascript">
		function createColumnChart(eventSel, criteriaSel, res) {
			var widget = dijit.byId("columnChart1");
           	if(widget)
           		widget.destroy();
			var columnChart = new dojox.charting.Chart2D("columnChart1");
        	// Set the theme
        	var theme = dojox.charting.themes.Tom;
   	 		theme.chart.fill= "lightgrey";
    		theme.plotarea.fill = "lightgrey";
        	columnChart.setTheme(theme);
        	// Add the only/default plot 
        	columnChart.addPlot("default", {type: "ClusteredColumns", tension: "S", shadows: {dx: 2, dy: 2}, gap: 3, minBarSize : 14, maxBarSize:24, animate:  { duration: 1000, easing: dojo.fx.easing.linear} }); 
        	// Create the tooltip
            new dojox.charting.action2d.Tooltip(columnChart,"default");
            new dojox.charting.action2d.Highlight(columnChart,"default");
            new dojox.charting.action2d.Magnify(columnChart,"default");	
           
            if(criteriaSel == "Sold_Seats") 
            	fillCol_Seats(columnChart, eventSel);
            else
            	fillCol_Sale(columnChart, eventSel);
		}
		
		function createPieChart(eventSel, criteriaSel) {
           	
           	var widget = dijit.byId("pieChart");
           	if(widget)
           		widget.destroy();
			var pieChart = new dojox.charting.Chart2D("pieChart");
			//set the theme
			var theme = dojox.charting.themes.Tom;
   	 		theme.chart.fill= "lightgrey";
    		theme.plotarea.fill = "lightgrey";
			pieChart.setTheme(theme);
	
			pieChart.addPlot("default", {
	        	type: "Pie",
    			labelOffset: -30,
    			radius: 150,
    			labelWiring: "grey",
       		 	labelStyle: "columns",
        		htmlLabels: true,
        		markers: true,
    			fontColor: "black"
			});
			
			new dojox.charting.action2d.MoveSlice(pieChart,"default");
			new dojox.charting.action2d.Tooltip(pieChart,"default");
			new dojox.charting.action2d.Highlight(pieChart,"default");
			
			if(criteriaSel == "Sold_Seats") 
				fillPie_Seats(pieChart, eventSel);
			else
				fillPie_Sale(pieChart, eventSel);
		}
		
		function updateGraph() {
           	var eventRef = dojo.byId("event");
           	
           	var criteriaRef = dojo.byId("criteria");
           	
           	var eventStr = eventRef.value;
           	var criteriaStr = criteriaRef.value;        	 
           	
           	var chartStr = criteriaStr + " for " + eventStr;
			
			var labelTag1 = "<div id=\"columnLabel\" style=\"background-color:gray;width:650px;\"><label>Column chart of " + chartStr + "<\/label><\/div>";
			var labelTag2 = "<div id=\"pieLabel\" style=\"background-color:gray;width:650px;\"><label>Pie chart of " + chartStr + "<\/label><\/div>";
			//var chartTag1 = "<div id=\"columnChart1\" class=\"left\" style=\"width:645px; height: 650px;\"><\/div>";
			var chartTag1 = "<div id=\"columnChart1\" style=\"height: 100%;width:100%;\"><\/div>";
			// var chartTag2 = "<div id=\"pieChart\" class=\"right\" style=\"height: 650px; width: 650px;\"><\/div>";
			var chartTag2 = "<div id=\"pieChart\" style=\"height:100%;width:100%;\"><\/div>";
			var legendTag1 = "<div id=\"columnLegend\"><\/div>"
			var legendTag2 = "<div id=\"pieLegend\"><\/div>"
			
			
			document.getElementById("labelContainer").innerHTML = labelTag1 + labelTag2;
			document.getElementById("columnContainer").innerHTML = chartTag1;
			document.getElementById("pieContainer").innerHTML = chartTag2;
			//document.getElementById("chartContainer2").innerHTML = chartTag1 + chartTag2;
			document.getElementById("legendContainer2").innerHTML = legendTag1;
			document.getElementById("legendContainer3").innerHTML = legendTag2;
			
			createColumnChart(eventStr, criteriaStr);
			createPieChart(eventStr, criteriaStr);
		}
		
	</script>
</head>
<body>
<div>
		<table align="center">
			<tr>
				<td><img src="images/NYLiberty.png" width="160" height="90" /></td>
				
				<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
				<td>
					<table>
						<tr>
							<td><font size="7" face="times new roman" color="#FFFFFF">New York Liberty</font></td>
						</tr>
						
						<tr>
						
							<td align="right"><font size="3" color="#FFFFFF">Ticket	Sales & Forecast</font></td>
						</tr>
					</table>
				</td>
			</tr>
		</table>
		<img src="images/White_square.png" width="100%" height="1" />
		<br><br/>
			</div>
	<div id="content">
		<!-- Blue Menu -->
				<div id="menu_wrapper" class="blue" >
	 	<div class="left"></div>
			<ul id="menu" >
				<li><a href="index.html">Upload File</a></li>
				<li><a href="tGrid.html">TICKET DATA</a></li>
				<li><a href="fGrid.html">Forecast</a></li>
				<li><a href="sfGrid.html">Season Forecast</a></li>
				<li><a href="sGrid.html">Season Data</a></li>
				<li><a href="pGrid.html">Price Data</a></li>
				<li><a href="tgGrid.html">Ticket Group</a></li>
				<li class="active"><a href="TicketsChart.html">CHART VIEW</a>
					<ul>
						<li><a href="TicketsChart.html">Ticket Sale</a></li>
						<li><a href="ForecastChart.html">Ticket Forecast</a></li>
					</ul>
				</li>
			</ul>
		</div>  
		
		<div id="chartContainer" style="width: 1300px; height: 730px; background-color: white;">
		<div style="background-color:gray;width:1300px;" class="blue">
			<label for="Events">Events:</label>
			<select id="event" data-dojo-type="dijit.form.Select" onchange="updateGraph()"></select>
			<label for="Criteria">Showing Criteria:</label>
			<select id="criteria" data-dojo-type="dijit.form.Select" onchange="updateGraph()"></select>
		</div>
		<hr style="background-color:gray;width:1300px;">
		<div id="labelContainer" class = "aParent" style="width: 1300px; height: 15px;"></div>
		<div id="chartContainer2" class = "aParent" style="width: 1300px; height: 650px;">
			<div id="columnContainer" style="height: 650px; width: 650px;">
				<div id="columnChart1" style="height: 100%; width: 100%;"></div>
			</div>
			<div id="pieContainer" style="height: 650px; width: 650px;">
				<div id="pieChart1" style="height: 100%; width: 100%;"></div>
			</div>
		</div>
		<div id="legendContainer" class = "aParent" style="height: 30px;">
			<div id="legendContainer2" style="height: 30px; width: 650px;">
				<div id="columnLegend"></div>
			</div>
			<div id="legendContainer3" style="height: 30px; width: 650px;">
				<div id="pieLegend"></div>
			</div>
		</div>
		</div>
		
		<div id="footer">| Copyright © 2012 Team MSG |
			sp12_msg@cs.nyu.edu | XHTML | CSS | All rights reserved |</div>


		<script type="text/javascript"
			src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
			djConfig="parseOnLoad:true">
		</script>

	<script type="text/javascript">
		//import essential libraries for the Dojo charting
		dojo.require("dijit.form.Select");
		dojo.require("dojox.charting.Chart2D");
		dojo.require("dojox.charting.plot2d.Pie");
		dojo.require("dojox.charting.plot2d.Lines");
		dojo.require("dojox.charting.action2d.Highlight");
		dojo.require("dojox.charting.action2d.MoveSlice");
		dojo.require("dojox.charting.action2d.Tooltip");
		dojo.require("dojox.charting.widget.Legend");
		dojo.require("dojox.charting.themes.Tom");
		dojo.require("dojox.charting.action2d.Magnify");
	</script>

	<script type="text/javascript">
		//load the utility page for using the utilities functions
		var utilityScript=document.createElement('script');
		utilityScript.src = "Utilities.js";
		document.body.appendChild(utilityScript);
	</script>

	<script type="text/javascript">
		function initiateChart(res) {
			var events = [];
     		var yAxis = [];
    		createComboItems(res, events, yAxis);
    			
    		//var ref_event = dijit.byId("event");
    		var ref_event = dojo.byId("event");
    		addComboItems(ref_event, events);
    			
    		var ref_criteria = dojo.byId("criteria");
    		addComboItems(ref_criteria, yAxis);
    			
    		updateGraph();
		}
		
		//function will be called when page loaded
		dojo.addOnLoad(function(){
			var xhrArgs = {
            sync: true,
            url: "/msgSp12/ActionController", 
            content : {requestAction: "ticketGraph"},
            handleAs: "json",
            load: initiateChart,
    		error: function(error) {
    		}
   			};
			dojo.xhrPost(xhrArgs);		
		});
	</script>
	</div>
</body>
</html>